<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-城市移动</title>
    <style>
        .move {
            display: inline-block;
            width: 30px;
        }

        select {
            width: 50px;
            height: 100px;
        }
    </style>
    <script>
        window.onload = function () {
            let leftBtn = document.getElementById("left-btn");
            let rightBtn = document.getElementById("right-btn");
            // 给 leftBtn 绑定事件
            leftBtn.onclick=function () {
                // 拿到 id="left-city" 及其子元素标签
                let leftCity = document.getElementById("left-city");
                let options = leftCity.children;
                // 遍历 options 获取选中的 option
                for (let i = 0; i < options.length; i++) {
                    if (options[i].selected){
                        // 获取右边的城市下拉框
                        let rightCity = document.getElementById("right-city");
                        // 将 options[i] 添加到 rightCity 中作为子元素
                        rightCity.appendChild(options[i]);
                        i--;
                    }
                }
            }
            // 给 rightBtn 绑定事件
            rightBtn.onclick=function () {
                // 拿到 id="left-city" 及其子元素标签
                let rightCity = document.getElementById("right-city");
                let options = rightCity.children;
                // 遍历 options 获取选中的 option
                for (let i = options.length - 1; i >= 0; i--) {
                    if (options[i].selected){
                        // 获取右边的城市下拉框
                        let leftCity = document.getElementById("left-city");
                        // 将 options[i] 添加到 rightCity 中作为子元素
                        leftCity.appendChild(options[i]);
                    }
                }
            }
        }
    </script>
</head>
<body>
<select id="left-city" multiple>
    <option value="0">重庆</option>
    <option value="1">武汉</option>
    <option value="2">上海</option>
    <option value="3">成都</option>
    <option value="4">北京</option>
</select>

<div class="move">
    <button id="left-btn">&gt;&gt;</button>
    <button id="right-btn">&lt;&lt;</button>
</div>

<select id="right-city" multiple>
    <!--<option value="5">深圳</option>-->
</select>
</body>
</html>